<template>
	<view class="container">
		<!-- 搜索头部 -->
		<view class="search-header">
			<view class="search-bar">
				<view class="search-icon">🔍</view>
				<input 
					class="search-input" 
					v-model="searchKeyword"
					placeholder="搜索商品名称/订单编号/批次号"
					@confirm="performSearch"
					focus="true"
				/>
				<button class="search-btn" @click="performSearch">搜索</button>
			</view>
			<view class="cancel-btn" @click="goBack">取消</view>
		</view>

		<!-- 搜索历史 -->
		<view class="search-history" v-if="!hasResults && searchHistory.length > 0">
			<view class="section-header">
				<text class="section-title">搜索历史</text>
				<text class="clear-btn" @click="clearHistory">清空</text>
			</view>
			<view class="history-tags">
				<view 
					class="history-tag" 
					v-for="(item, index) in searchHistory" 
					:key="index"
					@click="searchByHistory(item)"
				>
					{{item}}
				</view>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="hot-search" v-if="!hasResults">
			<view class="section-header">
				<text class="section-title">热门搜索</text>
			</view>
			<view class="hot-tags">
				<view 
					class="hot-tag" 
					v-for="(item, index) in hotSearch" 
					:key="index"
					@click="searchByHistory(item)"
				>
					{{item}}
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="search-results" v-if="hasResults">
			<view class="result-header">
				<text class="result-count">找到 {{searchResults.length}} 个相关商品</text>
				<view class="sort-options">
					<view 
						class="sort-item" 
						v-for="(sort, index) in sortOptions" 
						:key="index"
						:class="{ active: currentSort === index }"
						@click="setSort(index)"
					>
						{{sort.name}}
					</view>
				</view>
			</view>

			<scroll-view class="result-list" scroll-y="true">
				<view class="product-item" v-for="(product, index) in sortedResults" :key="index" @click="goToProduct(product)">
					<image class="product-image" :src="product.image" mode="aspectFill"></image>
					<view class="product-info">
						<view class="product-name">{{product.name}}</view>
						<view class="product-desc">{{product.description}}</view>
						<view class="product-tags">
							<view class="tag" v-for="(tag, tagIndex) in product.tags" :key="tagIndex" :class="tag.type">
								{{tag.name}}
							</view>
						</view>
						<view class="product-price">
							<text class="current-price">¥{{product.currentPrice}}</text>
							<text class="original-price" v-if="product.originalPrice">¥{{product.originalPrice}}</text>
						</view>
						<view class="product-meta">
							<text class="sales">销量 {{product.sales}}件</text>
							<text class="rating">评分 {{product.rating}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 无结果提示 -->
		<view class="no-results" v-if="hasResults && searchResults.length === 0">
			<view class="no-result-icon">🔍</view>
			<text class="no-result-text">未找到相关商品</text>
			<text class="no-result-tip">试试其他关键词或检查拼写</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				hasResults: false,
				currentSort: 0,
				searchHistory: ['苹果', '香蕉', '橙子', '葡萄'],
				hotSearch: ['新鲜水果', '有机蔬菜', '进口食品', '零食小吃'],
				searchResults: [],
				sortOptions: [
					{ name: '综合', key: 'comprehensive' },
					{ name: '销量', key: 'sales' },
					{ name: '价格', key: 'price' },
					{ name: '评分', key: 'rating' }
				]
			}
		},
		computed: {
			sortedResults() {
				const results = [...this.searchResults];
				const sortOption = this.sortOptions[this.currentSort];
				
				switch (sortOption.key) {
					case 'sales':
						return results.sort((a, b) => b.sales - a.sales);
					case 'price':
						return results.sort((a, b) => parseFloat(a.currentPrice) - parseFloat(b.currentPrice));
					case 'rating':
						return results.sort((a, b) => b.rating - a.rating);
					default:
						return results;
				}
			}
		},
		methods: {
			performSearch() {
				if (!this.searchKeyword.trim()) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					});
					return;
				}
				
				this.searchProducts();
			},
			searchProducts() {
				// 模拟搜索
				uni.showLoading({
					title: '搜索中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					
					// 模拟搜索结果
					if (this.searchKeyword.includes('苹果')) {
						this.searchResults = [
							{
								id: 1,
								name: '云南鲜甜青苹果',
								description: '果园直供 脆甜多汁 营养丰富',
								image: '/static/apple1.png',
								currentPrice: '48.8',
								originalPrice: '68.8',
								sales: 1234,
								rating: 4.8,
								tags: [
									{ name: '新鲜', type: 'fresh' },
									{ name: '包邮', type: 'free-shipping' }
								]
							},
							{
								id: 2,
								name: '红富士苹果',
								description: '山东烟台红富士 脆甜可口',
								image: '/static/apple2.png',
								currentPrice: '39.9',
								originalPrice: '59.9',
								sales: 856,
								rating: 4.6,
								tags: [
									{ name: '特价', type: 'discount' },
									{ name: '限时', type: 'limited' }
								]
							}
						];
					} else {
						this.searchResults = [];
					}
					
					this.hasResults = true;
					this.addToHistory(this.searchKeyword);
				}, 1000);
			},
			searchByHistory(keyword) {
				this.searchKeyword = keyword;
				this.performSearch();
			},
			addToHistory(keyword) {
				if (!this.searchHistory.includes(keyword)) {
					this.searchHistory.unshift(keyword);
					if (this.searchHistory.length > 10) {
						this.searchHistory.pop();
					}
				}
			},
			clearHistory() {
				uni.showModal({
					title: '确认清空',
					content: '确定要清空搜索历史吗？',
					success: (res) => {
						if (res.confirm) {
							this.searchHistory = [];
						}
					}
				});
			},
			setSort(index) {
				this.currentSort = index;
			},
			goToProduct(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				});
			},
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 搜索头部 */
.search-header {
	background-color: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.search-bar {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 25rpx;
	padding: 15rpx 20rpx;
	gap: 15rpx;
}

.search-icon {
	font-size: 32rpx;
	color: #666;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
}

.search-btn {
	background-color: #ff6b35;
	color: white;
	border: none;
	border-radius: 20rpx;
	padding: 10rpx 20rpx;
	font-size: 24rpx;
}

.cancel-btn {
	color: #666;
	font-size: 28rpx;
}

/* 搜索历史 */
.search-history {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.clear-btn {
	color: #ff6b35;
	font-size: 24rpx;
}

.history-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.history-tag {
	background-color: #f8f8f8;
	color: #666;
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
	font-size: 26rpx;
}

/* 热门搜索 */
.hot-search {
	background-color: #fff;
	margin: 0 20rpx 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.hot-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.hot-tag {
	background-color: #fff5f0;
	color: #ff6b35;
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
	font-size: 26rpx;
	border: 1rpx solid #ff6b35;
}

/* 搜索结果 */
.search-results {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.result-count {
	font-size: 28rpx;
	color: #666;
}

.sort-options {
	display: flex;
	gap: 30rpx;
}

.sort-item {
	font-size: 26rpx;
	color: #666;
	padding: 10rpx 0;
	position: relative;
}

.sort-item.active {
	color: #ff6b35;
}

.sort-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 3rpx;
	background-color: #ff6b35;
	border-radius: 2rpx;
}

/* 商品列表 */
.result-list {
	max-height: 800rpx;
}

.product-item {
	display: flex;
	gap: 20rpx;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-item:last-child {
	border-bottom: none;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	line-height: 1.4;
}

.product-desc {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

.product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.tag {
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;
	color: white;
}

.tag.fresh {
	background-color: #52c41a;
}

.tag.free-shipping {
	background-color: #1890ff;
}

.tag.discount {
	background-color: #ff6b35;
}

.tag.limited {
	background-color: #ff4757;
}

.product-price {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.current-price {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: bold;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.product-meta {
	display: flex;
	gap: 20rpx;
	font-size: 22rpx;
	color: #999;
}

/* 无结果提示 */
.no-results {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 80rpx 30rpx;
	text-align: center;
}

.no-result-icon {
	font-size: 80rpx;
	margin-bottom: 30rpx;
}

.no-result-text {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	display: block;
	margin-bottom: 20rpx;
}

.no-result-tip {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}
</style>